<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不同市场级别新老用户浏览转化率</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        .chart-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 1.5rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="bg-gray-50">
<div class="chart-container">
    <h2 class="text-xl font-bold mb-4">不同市场级别新老用户整体浏览转化率</h2>
    <div class="h-80">
        <canvas id="marketUserConversionChart"></canvas>
    </div>
</div>

<script>
    // 原始数据：不同市场新老用户的整体浏览转化率
    const marketData = [
        { market: "1", userType: "老用户", rate: 0.07415786827551533 },
        { market: "3", userType: "新用户", rate: 0.05 },
        { market: "4", userType: "老用户", rate: 0.09372049102927289 },
        { market: "1", userType: "新用户", rate: 0.06033635470132139 },
        { market: "2", userType: "新用户", rate: 0.057438458794149126 },
        { market: "2", userType: "老用户", rate: 0.07916974321109196 },
        { market: "3", userType: "老用户", rate: 0.05876120619396903 },
        { market: "4", userType: "新用户", rate: 0.06095717884130982 }
    ];

    // 转换为百分比（保留2位小数）
    const toPercent = (value) => (value * 100).toFixed(2);

    // 提取唯一市场和用户类型
    const markets = [...new Set(marketData.map(item => `市场${item.market}`))].sort();
    const userTypes = ["新用户", "老用户"];

    // 组织图表数据
    const datasets = userTypes.map(type => {
        const colors = {
            "新用户": "#F97316",
            "老用户": "#10B981"
        };

        return {
            label: type,
            data: markets.map(market => {
                const marketNum = market.replace("市场", "");
                const item = marketData.find(d => d.market === marketNum && d.userType === type);
                return item ? toPercent(item.rate) : 0;
            }),
            backgroundColor: colors[type],
            borderColor: colors[type],
            borderRadius: 4,
            barPercentage: 0.6
        };
    });

    document.addEventListener("DOMContentLoaded", () => {
        new Chart(document.getElementById("marketUserConversionChart"), {
            type: "bar",
            data: {
                labels: markets,
                datasets: datasets
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        title: { display: true, text: "市场级别" },
                        grid: { display: false }
                    },
                    y: {
                        beginAtZero: true,
                        max: 10,
                        title: { display: true, text: "整体浏览转化率 (%)" },
                        ticks: { callback: v => v + "%" }
                    }
                },
                plugins: {
                    legend: { position: "top" },
                    tooltip: {
                        callbacks: { label: l => `${l.dataset.label}: ${l.raw}%` }
                    }
                },
                animation: { duration: 1500, easing: "easeOutQuart" }
            }
        });
    });
</script>
</body>
</html>